<template>
  <div class="send-msg-model" >
    <el-dialog
      title="发送给："
      :visible="sendMsgModelShow"
      @close="handleClose(false)"
      width="30%">
      <div class="user-info">
         <el-avatar :size="40" :src="receiver.avatar">
            <img src="../../../assets/picture/defaultAvatar.png"/>
          </el-avatar>
          <span class='name'>{{receiver.name}}</span>
      </div>
      <div class="file-box">
        <span v-for="(item, index) in dragFileList" :key="index">
         [{{filetype[index]}}] {{item.name || 文件名字}}
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose(false)">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import _ from 'lodash'
export default {
  props: {
    sendMsgModelShow: { type: Boolean, default: false },
    receiver: {
      type: Object,
      default: function () {
        return {}
      }
    },
    dragFileList: {
      type: [FileList, Object],
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      search: '',
      dialogVisible: ''
    }
  },

  computed: {
    ...mapState('transpond', ['visible', 'selectUserIds', 'selectInfo']),
    ...mapState('app', ['chatList', 'friendList', 'groupList']),
    filetype: function () {
      let list = []
      Object.keys(this.dragFileList).map(key => {
        const type = this.dragFileList[key].type.split('/')[0]
        switch (type) {
          case 'image':
            list[key] = '图片'
            break
          case 'video':
            list[key] = '视频'
            break
          default:
            list[key] = '文件'
        }
      })
      return list
    }
  },
  methods: {
    isGroup: function (id) { // 选中的聊天室是否群聊
      const i = _.findIndex(this.groupList, a => a.roomId + '' === id + '')
      return i !== -1
    },
    handleClose (val) {
      this.$emit('onToggleSendMsgModelShow', val)
    },
    handleConfirm () {
      this.$emit('onConfirmSend', this.dragFileList)
      this.handleClose(false)
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin over-ellipsis($width:170px) {
  width: $width;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.send-msg-model {
  .user-info{
    display: flex;
    align-items: center;
    .name {
      display: inline-block;
      margin-left: 10px;
      @include over-ellipsis(170px)
    }
  }
  .file-box{
    margin-top: 10px;
    padding: 10px;
    background: #DCDFE6;
    display: flex;
    flex-direction: column;
    span{
      display: inline-block;
       @include over-ellipsis(170px)
    }
  }
}
</style>
